<template>
    <v-app>
        <v-container>
            <v-row>
                <v-col>
                    <v-menu
                        ref="menu"
                        v-model="menu"
                        :close-on-content-click="false"
                        :return-value.sync="dateRange"
                        transition="scale-transition"
                        offset-y
                        min-width="290px"
                    >
                        <template v-slot:activator="{ on, attrs }">
                            <v-text-field
                                v-model="dateRangeText"
                                label="选择日期范围"
                                readonly
                                v-bind="attrs"
                                v-on="on"
                            ></v-text-field>
                        </template>
                        <v-date-picker
                            v-model="dateRange"
                            range
                            no-title
                            scrollable
                        >
                            <v-spacer></v-spacer>
                            <v-btn text color="primary" @click="menu = false">取消</v-btn>
                            <v-btn text color="primary" @click="fetchData">确定</v-btn>
                        </v-date-picker>
                    </v-menu>
                </v-col>
            </v-row>
            <v-row>
                <v-col>
                    <v-card v-for="(stat, index) in stats" :key="index" class="mb-3">
                        <v-card-title>{{ stat.date }}</v-card-title>
                        <v-card-text>
                            <div>消耗金币: {{ stat.goldSpent }}</div>
                            <div>抢到的订单: {{ stat.ordersTaken }}</div>
                            <div> <v-btn color="primary" @click="openDialog(stat.list)">查看订单</v-btn></div>

                        </v-card-text>
                    </v-card>
                </v-col>
            </v-row>
            <v-dialog v-model="dialog" max-width="1000px">
                <v-card>
                    <v-card-title>订单列表</v-card-title>
                    <v-card-text>
                        <!-- 表格 -->
                        <v-data-table
                            :headers="headers"
                            :items="orders"
                            :items-per-page="5"
                            class="elevation-1"
                        ></v-data-table>
                    </v-card-text>
                    <v-card-actions>
                        <v-btn color="error" @click="dialog = false">关闭</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>


        </v-container>
    </v-app>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            dateRange: [],
            menu: false,
            dialog: false,
            headers: [
                { text: '订单号', value: 'id' },
                { text: '姓名', value: 'name' },
                { text: '手机号', value: 'mobile' },
                { text: '城市', value: 'province' },
                { text: '类型', value: 'category_type' },
                { text: '需要金币', value: 'need_ticket' },
            ],
            orders: [

            ],
            stats: []
        };
    },
    created() {
        this.load();
    },
    computed: {
        dateRangeText() {
            if (this.dateRange.length === 2) {
                return `${this.dateRange[0]} - ${this.dateRange[1]}`;
            }
            return '选择日期范围';
        }
    },
    methods: {
        openDialog(_list){
            this.orders = _list
            this.dialog = true
        },
        load(){
            const that = this;
            axios.post(`/app/setting_statistics/dataStatistics`, { dateRange: this.dateRange}).then((response) => {
                console.log('response.data',response.data.data)
                this.stats = response.data.data
            });
        },
        fetchData() {
            this.load();
        }
    }
};
</script>

<style>
/* 这里可以添加一些CSS样式 */
</style>
